<template>
  <div  style="padding: 0px;margin-top: 0px;height: 100%">
    <el-row id="caozuo" >
      <el-col :span="2">
        <el-button id="button1" @click="addCase" class="el-icon-circle-plus-outline"> 添加 </el-button>
      </el-col>
      <el-col :span="2">
        <el-button id="button1" @click="EditCase" class="el-icon-edit"> 编辑 </el-button>
      </el-col>
      <el-col :span="2">
        <el-button id="button1" @click="DeleteCase" class="el-icon-circle-plus-outline"> 删除 </el-button>
      </el-col>
      <el-col :span="2">
        <el-button id="button1" @click="RunCase" class="iconfont icon-jion-zhihang"> 执行 </el-button>
      </el-col>
      <el-col :span="2">
        <el-button id="button1" @click="ConfigCase" class="iconfont icon-jion-ceshishenqing"> 配置接口 </el-button>
      </el-col>
      <el-col :span="2">
        <el-button id="button1" @click="BeforeCase" class="iconfont icon-jion-get"> 前置设置 </el-button>
      </el-col>
      <el-col :span="2">
        <el-button id="button1" @click="ActionCase" class=" el-icon-check"> 检查点 </el-button>
      </el-col>
    </el-row>

    <el-row :style="height">
      <el-col :span="6" id="div1line">
        <el-tree
          :data="treeData"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          check-strictly
          @node-contextmenu="rightClick"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
                <i v-if="node.data.nodetype==='1'" class="el-icon-message"></i>
                <i v-else-if="node.data.nodetype==='2' " class="iconfont icon-jion-wuxiandianbo"></i>
              {{ node.label }}
            </span>
        </span>
        </el-tree>

<!--
        <span><i class="el-icon-message"></i></span>
-->
      </el-col>
      <el-col :span="6" id="div2line">
        ssss
      </el-col>
    </el-row>
    <el-dialog :modal=false title="新增节点" :visible.sync="AddDialog" :close-on-click-modal="false" style="width: 850px;left: 18%"  >
      <el-form v-model="NameDialog" status-icon  ref="NameDialog"  class="demo-ruleForm">
        <el-form-item label="名称"  prop="name">
          <el-input style="width:300px" type="text" v-model="NameDialog.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio style="text-align: right" v-model="NameDialog.nodetype" label="1">目录</el-radio>
          <el-radio v-model="NameDialog.nodetype" label="2">接口</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeForm">取 消</el-button>
        <el-button type="primary" @click="AddNode">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :modal=false title="" :visible.sync="EditDialog" :close-on-click-modal="false" style="width: 800px;left: 18%"  >
      <el-form v-model="NameDialog" status-icon  ref="NameDialog"  class="demo-ruleForm">
        <el-form-item label="名称"  prop="name">
          <el-input style="width:300px" type="text" v-model="NameDialog.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeForm">取 消</el-button>
        <el-button type="primary" @click="EditNode">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<style>
  .el-tree-node:focus>.el-tree-node__content{
    background-color: #34d8ff;
  }
  .el-tree-node__content:hover {
    background-color: #34d8ff;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding-right: 8px;
  }
  #button1{
    text-align: center;border: 0px;

    background: #dce9ff;

    color: #0890f3;
    font-size: 13px;
    font-family: "Heiti TC";
    font-weight: bold;
  }
  #caozuo{
    height: 39px;
    margin-right: -18px;
    margin-left: -15px;
    margin-top: -15px;
    border-bottom: 1px solid #13E1FF;
    border-top: 1px solid #13E1FF;
    background: #dce9ff;
  }
  #div1line{
    height: 100%;
    border-right: 1px double #b9c1cc;
    border-collapse : separate
  }
</style>

<script>

    export default {
        data() {
            return {
              AddDialog:false,
              EditDialog:false,
              treeData:[],
              height:{
                height:'',
              },
              NameDialog:{
                name:'',
                pid:'',
                id:'',
                nodetype:'',
                requestType:1,
              },
              nodefrom:{
                label:'',
                id:'',
                pid:'',
                EmployeeId:window.localStorage.getItem("EmployeeID"),
              }
            }
        },
      methods:{
        hh:function () {
          this.height.height=window.innerHeight-138+'px';
        },
        Tree:function () {
          this.$axios.post("/case/caseList",{}).then(Response=>{
              this.treeData=Response.data;
            })
        },
        addCase:function () {
          var req = this.$refs.tree.getCurrentNode();
          if (this.$refs.tree.getCurrentNode().nodetype ==='2'){
            this.$alert('请选择目录','提示',{
              confirmButtonText: '确定',
            })
          }else {
            this.NameDialog.pid = req.id;
              this.AddDialog=true;
          }
          console.log(this.$refs.tree.getCheckedKeys())
        },
        EditCase:function(){
          var req = this.$refs.tree.getCurrentNode();
          this.NameDialog.name = req.name;
          this.NameDialog.id = req.id;
          console.log(this.NameDialog.name);
          this.EditDialog=true;
        },
        AddNode:function(){
          let form =this.nodefrom;
          var req = this.$refs.tree.getCurrentNode();
          form.pid = req.id;
          form.label = req.name;
          this.$axios("/case/addCase",form).then(Response=>{
            if (Response.data.code ==0){
              this.Tree();
            } else {
              this.$notify({
                message: Response.data.msg,
                duration: 1000
              });
            }
          })
        },
        rightClick(event,object,value,element){
          console.log("ssss")
        },
        DeleteCase:function () {

        },
        RunCase:function () {

        },
        ConfigCase:function () {

        },
        BeforeCase:function () {

        },
        ActionCase:function () {

        },
        EditNode:function () {

        },
        closeForm:function () {

        }

      },
      created(){
          this.hh();
        this.Tree();
      },

    }

</script>
